<template>
  <div class="chart"></div>
</template>

<script>
// http://datav.aliyun.com/portal/school/atlas/area_selector  地图生成器网址
import mapJson from './assets/jx.json'
import * as echarts from 'echarts'
export default {
  name: 'echarts',
  data () {
    return {
      mapColor: '',
      // !注意数据和json里面的数据一定要相匹配
      dataValue: [
        { name: '杭州市', value: 8 },
        { name: '宁波市', value: 28 },
        { name: '温州市', value: 48 },
        { name: '嘉兴市', value: 68 },
        { name: '金华市', value: 88 },
        { name: '衢州市', value: 108 },
        { name: '舟山市', value: 128 },
        { name: '台州市', value: 128 },
        { name: '丽水市', value: 128 }
      ]
    }
  },
  mounted () {
    this.echartsInit()
  },
  methods: {
    echartsInit () {
      const markPoint = [
        {
          value: [119.5, 30],
          // 单独修改圆环上的文字
          label: {
            formatter: '电厂1', // 圆环显示文字
            color: 'black'
          },
          itemStyle: {
            color: '#fe2321'
          },
          router: '/baidu'
        },
        {
          value: [121.5, 30],
          label: {
            formatter: '电厂2',
            color: 'black'
          },
          itemStyle: {
            color: '#fe2321'
          }
        }
      ]

      // 这里填写json文件数据
      echarts.registerMap('jx', mapJson)

      const myChart = echarts.init(this.$el)

      myChart.setOption({
        title: {
          text: '浙江省',
          x: 'center'
        },
        geo: {
          map: 'jx',
          label: {},
          roam: false, // 控制是否可以拖拽
          itemStyle: {},
          zoom: 1.2
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              show: true,
              color: '#fff'
            },
            symbol: 'pin', // 定位图标样式
            symbolSize: 40,
            data: markPoint,
            // 新增点击事件
            onClick: (params) => {
              console.log('点击了散点:', params)
            }
          },
          {
            // !显示字体修改这两个地方
            type: 'map',
            map: 'jx',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            symbolSize: function (val, params) {
              return 8
            },
            data: this.dataValue,
            zoom: 1.2,
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: { color: '#f40' } // 省份标签字体颜色
              }
              // emphasis: {
              //   // 对应的鼠标悬浮效果
              //   show: true,
              //   textStyle: { color: '#800080' }
              // }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#009fe8', // 区域边框颜色
                // areaColor: 'red' // 区域颜色
                areaColor: this.mapColor // 区域颜色
              }
              // emphasis: {
              //   borderWidth: 0.5,
              //   borderColor: '#4b0082',
              //   areaColor: '#f47920'
              // }
            }
          }
        ]
      })

      // 先添加一个全局的事件监听器
      myChart.on('click', (params) => {
        // console.log('点击')
        // console.log(params)
        if (params.componentSubType === 'scatter') {
          // 这里处理点击散点的逻辑
          console.log('点击了散点:', params)
          if (params?.data?.router) {
            this.$router.push(params.data.router)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  background-color: #8f9f91;
  height: 500px;
  width: 40%;
}
</style>
